<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center personalData_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub personalData_fd0_0'>
          <view class='flex flex-wrap align-center personalData_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  personalData_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='personalData_fd0_0_c1_c0'>个人资料</text>
          </view>
          <view class='flex flex-wrap align-center justify-end personalData_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

      <view class="flex flex-direction flex-wrap align-stretch personalData_flex_1">
        <view class='flex flex-wrap align-center personalData_fd1_0'>
          <text class='personalData_fd1_0_c0'>头像</text>
          <benben-image-upload :path.sync="user.avatar" :img-id.sync="user.avatar" :is-cropping="true"
            :is-show-clean="false" class="upload position-relative personalData_fd1_0_c1">

            <image class=" personalData_fd1_0_c1_image" mode="aspectFill"
              :src="user.avatar ? user.avatar : STATIC_URL+'80.png'"></image>
          </benben-image-upload>
          <image class='personalData_fd1_0_c2' mode="aspectFit" :src='STATIC_URL+"81.png"'></image>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1'>
          <text class='personalData_fd1_0_c0'>昵称</text>
          <benben-input class='flex-sub personalData_fd1_1_c1' type="text" :placeholder="`请输入昵称`" confirm-type="done"
            :maxlength="20" placeholder-style="color:#666666;font-size:32rpx" v-model="user.nickname" />
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1'
          @tap.stop="pickerDiy1702537416284=true">
          <text class='personalData_fd1_0_c0'>性别</text>
          <view class='flex flex-wrap align-center'>
            <text class='personalData_fd1_2_c1_c0'>{{sex}}</text>
            <image class='personalData_fd1_0_c2' mode="aspectFit" :src='STATIC_URL+"81.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1'>
          <text class='personalData_fd1_0_c0'>个性签名</text>
          <benben-input class='flex-sub personalData_fd1_1_c1' type="text" :placeholder="`请输入个性签名`" confirm-type="done"
            :maxlength="25" placeholder-style="color:#666666;font-size:32rpx" v-model="user.gexingqianming" />
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_7'>
          <text class='personalData_fd1_0_c0'>选择角色</text>
        </view>
        <view class='flex flex-wrap align-center personalData_fd1_8'>
          <view class='flex flex-wrap align-center justify-center ' @click.stop="openPop(item)"
            v-for="(item,index) in juese"
            :class="item.aid==user.user_group ? 'personalData_fd1_8_c0' : 'personalData_fd1_8_c1'" :key="index">
            <text>{{item.name}}</text>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1' v-if="user.user_group==3"
          @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/grzx/chooseCompany/chooseCompany`">
          <text class='personalData_fd1_0_c0'>企业名称：</text>
          <benben-input class='flex-sub personalData_fd1_1_c1' type="text" disabled :placeholder="`请选择`"
            confirm-type="done" :maxlength="-1" placeholder-style="color:#666666;font-size:32rpx"
            v-model="user.company_name" />
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1' v-if="user.user_group==3">
          <text class='personalData_fd1_0_c0'>个人电话：</text>
          <benben-input class='flex-sub personalData_fd1_1_c1' type="number" :placeholder="`请输入`" confirm-type="done"
            :maxlength="11" placeholder-style="color:#666666;font-size:32rpx" v-model="user.qiye_mobile
" />
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_1' v-if="user.user_group==3">
          <text class='personalData_fd1_0_c0'>真实姓名：</text>
          <benben-input class='flex-sub personalData_fd1_1_c1' type="text" :placeholder="`请输入`" confirm-type="done"
            :maxlength="7" placeholder-style="color:#666666;font-size:32rpx" v-model="user.real_name" />
        </view>
        <view class='flex flex-direction flex-wrap align-stretch' v-if="user.user_group!=1">
          <view class='flex flex-wrap align-center justify-between personalData_fd1_1'>
            <text class='personalData_fd1_0_c0'>职业：</text>
            <benben-input class='flex-sub personalData_fd1_1_c1' type="text" :placeholder="`请输入职业`" confirm-type="done"
              :maxlength="7" placeholder-style="color:#666666;font-size:32rpx" v-model="user.zhiye" />
          </view>
          <view class='flex flex-wrap align-center justify-between personalData_fd1_1' v-if="user.user_group==2">
            <text class='personalData_fd1_0_c0'>手机号：</text>
            <benben-input class='flex-sub personalData_fd1_1_c1' type="number" :placeholder="`请输入`" confirm-type="done"
              :maxlength="11" placeholder-style="color:#666666;font-size:32rpx" v-model="user._mobile" />
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_7'
          style="border-bottom: 1rpx solid #EEEEEE;" @click.stop="popupShow1717472040945=true"
          v-if="user.user_group!=1">
          <text class='personalData_fd1_0_c0'>行业属性：</text>
          <view class='flex flex-wrap align-center'>
            <view class='flex flex-wrap align-center justify-center personalData_fd1_10_c1_c0'
              v-for="(item,index) in hy_arr" :key="index">
              <text>{{item.name}}</text>
            </view>
            <image class='personalData_fd1_10_c1_c1' mode="aspectFit" :src='STATIC_URL+"11.png"'></image>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-stretch justify-between qiyeInfo_fd1_0'
          v-if="user.user_group!=1">
          <view class='flex flex-wrap align-center justify-between' @click.stop="choosePop">
            <text>业务范围</text>
            <image class='qiyeInfo_fd1_6_c0_c1' mode="aspectFit" :src='STATIC_URL+"173.png"'></image>
          </view>
          <view class='flex flex-wrap align-center'>
            <view class='flex flex-wrap align-center qiyeInfo_fd1_6_c1_c0' v-for="(item,index) in yewuList"
              :key="index">
              <text>{{item}}</text>
              <image @click.stop="delYewu(item,index)" class='qiyeInfo_fd1_6_c1_c0_c1' mode="aspectFit"
                :src='STATIC_URL+"174.png"'></image>
            </view>
          </view>
        </view>
        <view class='flex  align-center justify-between personalData_fd1_7' v-if="user.user_group==2"
          @click.stop="chooseMap">
          <text class='personalData_fd1_0_c0'>常驻位置</text>
          <view class='flex flex-wrap align-center'>
            <view class='flex flex-wrap align-center justify-center personalData_fd1_11_c1_c0'>
              <text v-if="user.city">{{user.province }}{{user.city }}</text>
              <text v-else>请选择</text>
            </view>
            <image class='personalData_fd1_10_c1_c1' mode="aspectFit" :src='STATIC_URL+"11.png"'></image>
          </view>
        </view>

      </view>


      <benben-popup v-model="popupShow1717472040945" :mask="true" :mask-close-able="true" mode='bottom' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-stretch personalData_fd2_0'>
            <view class='flex flex-wrap align-center justify-between personalData_fd2_0_c0'>
              <text @click.stop="popupShow1717472040945=false">取消</text>
              <text class='personalData_fd2_0_c0_c1'>选择行业属性</text>
              <text class='personalData_fd2_0_c0_c2' @click.stop="chooseH">确定</text>
            </view>
            <scroll-view :scroll-y='true' class='clearfix' style="height: 500rpx;width: 100%;">
              <view class='flex flex-wrap align-center justify-center float_left '
                v-for="(item,index) in industryattributes_list" @click.stop="chooseHangye(item)" :key="index"
                :class="item.is_show? 'personalData_fd2_0_c1_c1' : 'personalData_fd2_0_c1_c0'">
                <text>{{item.name}}</text>
              </view>

            </scroll-view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
      <!--选择性别开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1702537416284" :label.sync='sex'
        :value.sync='user.gender' :options='sex_options' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker3_0'>
            <text class='personalData_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text class='personalData_picker3_0_c1'>选择性别</text>
            <text class='personalData_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择性别结束 -->
      <benben-popup v-model="popupShow1717470994756" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center personalData_flex_4">
          <text class='personalData_fd4_0'>提示</text>
          <text class='personalData_fd4_1'>确认切换角色吗</text>
          <view class='flex flex-wrap align-center personalData_fd4_2'>
            <button class='personalData_fd4_2_c0' @click.stop="popupShow1717470994756=false">取消</button>
            <button class='personalData_fd4_2_c1' @click.stop="chooseGroup">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>
      <!--选择器开始 -->
      <benben-picker ref="benbenWritePickerCodepicker5" :visible.sync="pickerDiy1717470953796" :label.sync='addressName'
        :province.sync='sheng' :city.sync='city' :area.sync='qu' mode='region' :mask-show='true' :picker-height='88'
        :hide-area='true'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker5_0'>
            <text @tap="$refs.benbenWritePickerCodepicker5.cancel()">取消</text>
            <text>选择地址</text>
            <text class='personalData_picker5_0_c2' @tap="$refs.benbenWritePickerCodepicker5.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器结束 -->

      <button class='personalData_fd1_6' @tap.stop="submitsFunc()">保存</button>
    </view>

    <benben-popup v-model="isShow" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
      <view class='flex flex-wrap align-center dongDetail_fd2_3'>
        <view class='flex align-center flex-sub dongDetail_fd2_3_c0'>
          <image class='dongDetail_fd2_3_c0_c0' mode="aspectFit" :src='STATIC_URL+"162.png"'></image>
          <input cursor-spacing="50" class='dongDetail_fd2_3_c0_c1' type="text" :placeholder="$t('请输入')"
            confirm-type="done" :maxlength="8" placeholder-style="color:#999;font-size:28rpx" v-model="content" />
        </view>
        <button class='dongDetail_fd2_3_c1' @tap.stop="queryMessageFunc()">添加</button>
      </view>
    </benben-popup>
  </page-body>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  import amapFile from '@/libs/amap-wx.js';
  export default {
    components: {},


    data() {
      return {
        myAmapFun: null,
        content: '',
        "pickerDiy1717470953796": false,
        "popupShow1717470994756": false,
        "pickerDiy1702537416284": false,
        "popupShow1717472040945": false,
        "header_img": "",
        "user": {
          id: '',
          user_group: '',
          address: "",
          address_code: '',
          avatar: '',
          birthday: '',
          gender: '',
          shareUrl: '',
          shareTitle: "",
          hobby: '',
          _mobile: '',
          invite_code: '',
          gender: '',
          city: '',
          lat: '',
          lng: '',
          province: '',
          nickname: '',
          company_id: ''
        },
        "sex": "",
        "sex_options": [{
          "name": "保密",
          "value": "0",
          "image": ""
        }, {
          "name": "男",
          "value": "1",
          "image": ""
        }, {
          "name": "女",
          "value": "2",
          "image": ""
        }],
        "addressName": "",
        "city": "",
        "qu": "",
        "sheng": "",
        juese: [{
          aid: 1,
          name: '普通用户'
        }, {
          aid: 2,
          name: '自由职业'
        }, {
          aid: 3,
          name: '企业职员'
        }],
        jueseId: '1',
        isShow: false,
        yewuList: [],
        industryattributes_list: [],
        hy_arr: []
      };
    },
    computed: {

    },
    watch: {},
    onLoad(options) {
      this.myAmapFun = new amapFile.AMapWX({
        key: '63259edc296cb943ffc26c92b77eba63'
      });
      this.queryUserInfoFunc()
      this.getList()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      uni.$on('qite', data => {
        this.user.company_name = data.mingcheng
        this.user.company_id = data.company_id
        console.log('lklkk', data)
      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      choosePop() {
        if (this.yewuList.length > 11) {
          this.$message.info('业务范围最多添加12个，请谨慎添加')
          return
        }
        this.isShow = true
      },
      chooseMap() {
        let _this = this

        uni.chooseLocation({
          success: (resule) => {

            _this.user.lng = resule.longitude
            _this.user.lat = resule.latitude
            _this.myAmapFun.getRegeo({
              location: resule.longitude + ',' + resule.latitude,
              success: (data) => {
                //成功回调
                let regeoData = data[0].regeocodeData.addressComponent;
                let city = regeoData.city.length ? regeoData.city : '';
                let location_city = regeoData.city.length ? regeoData.city : '';
                _this.user.province = regeoData.province;
                let location_province = regeoData.province;
                let location_district = regeoData.district;
                _this.user.city = location_city
                console.log('_this_this_this_this_this', _this.user.city)
              },
              fail: (info) => {
                //失败回调
                console.log('info111', info)
              }
            })
          },
          fail: (info) => {
            //失败回调
            console.log('info111', info)
          }
        })
      },
      getList() {
        this.$api.post(global.apiUrls.post664eb892f02d1).then(res => {
          if (res.data.code == 1) {
            this.industryattributes_list = res.data.data
          }
        })
      },
      openPop(item) {
        if (this.user.user_group != 1) {
          this.$message.info('当前用户不能更改角色')
          return;
        }
        this.jueseId = item.aid
        this.popupShow1717470994756 = true
      },
      // 添加业务
      queryMessageFunc() {
        if (this.content) {
          this.yewuList.push(this.content)
          this.content = ''
          this.isShow = false
        }
      },
      delYewu(item, index) {
        this.yewuList.splice(index)
      },
      chooseGroup(item) {
        this.user.user_group = this.jueseId
        this.popupShow1717470994756 = false
      },
      //获取用户详细信息
      async queryUserInfoFunc() {
        //请求方法
        //数据验证

        let datauser = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datauser.data.code != 1) {
          this.$message.info(datauser.data.msg);
          return
        }
        let infouser = datauser.data;
        this.user = infouser.data
        if (infouser.data.free_business_tags_list.length) {
          this.yewuList = infouser.data.free_business_tags_list.map(item => {
            return item.name
          })
        }

        this.hy_arr = infouser.data.freeindustryattributesList
        if (this.user.gender == 0) {
          this.sex = '保密';
        } else if (this.user.gender == '1') {
          this.sex = '男';
        } else if (this.user.gender == '2') {
          this.sex = ' 女';
        }
      },
      chooseHangye(item) {
        item.is_show = !item.is_show
      },
      chooseH() {
        this.hy_arr = this.industryattributes_list.filter(item => item.is_show)
        if (this.hy_arr.length > 3) {
          this.$message.info('行业属性目前最多只能选择三个，请重新选择')
          return
        }
        this.popupShow1717472040945 = false
      },
      //修改个人资料
      async submitsFunc() {

        if (!validate(this.user.nickname, 'require')) {
          this.$message.info('请输入昵称');
          return false;
        }
        //请求方法
        //数据验证
        if (this.user.user_group != 1) {
          if (this.hy_arr.length != 0) {
            this.user.freeindustryattributes_id = this.hy_arr.map(item => {
              return item.aid
            }).join(',')
          } else {
            // return
          }
        }
        if (this.user.qiye_mobile) {
          if (!validate(this.user.qiye_mobile, 'phone')) {
            this.$message.info('请输入正确的手机号');
            return false;
          }
        }
        if (this.yewuList.length) {
          this.user.freebusinesstags_id = this.yewuList.join(',')
        }
        let data5cb54af125f1c = await this.$api.dbPost(global.apiUrls.post5cb54af125f1c, {
          avatar: this.user.avatar,
          nickname: this.user.nickname,
          gender: this.user.gender,
          user_group: this.user.user_group, //角色
          zhiye: this.user.zhiye, //职业
          company_name: this.user.company_name, //企业名称
          company_id: this.user.company_id, //企业名称
          real_name: this.user.real_name, //真实姓名
          _mobile: this.user._mobile, //手机号
          freeindustryattributes_id: this.user.freeindustryattributes_id,
          lng: this.user.lng,
          lat: this.user.lat,
          province: this.user.province,
          city: this.user.city,
          gexingqianming: this.user.gexingqianming,
          freebusinesstags_id: this.user.freebusinesstags_id,
          qiye_mobile: this.user.qiye_mobile
        });
        if (!data5cb54af125f1c) return
        if (data5cb54af125f1c.data.code != 1) {
          this.$message.info(data5cb54af125f1c.data.msg);
          return
        }
        let info5cb54af125f1c = data5cb54af125f1c.data;


        this.$message.info('修改成功');
        this.$urouter.navigateBack(1);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .dongDetail_fd2_3_c2_c0 {
    width: 32rpx;
    height: 32rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c2 {
    color: var(--benbenFontColor2);
    margin: 0rpx 30rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c1 {
    background: var(--benbenbgColor2);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
    width: 104rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c0_c1 {
    color: var(--benbenFontColor0);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    width: 100%;
  }

  .dongDetail_fd2_3_c0_c0 {
    width: 26rpx;
    height: 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 8rpx 0rpx 0rpx;
  }

  .dongDetail_fd2_3_c0 {
    background: #F8F8F8;
    border-radius: 36rpx 36rpx 36rpx 36rpx;
    padding: 16rpx 32rpx 16rpx 32rpx;
    margin: 0rpx 32rpx 0rpx 32rpx;
  }

  .dongDetail_fd2_3 {
    background: var(--benbenbgColor1);
    position: fixed;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    padding: 24rpx 0rpx 40rpx 0rpx;
    background-size: 100% auto;
  }

  .qiyeInfo_fd1_0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
    width: 686rpx;
    margin: 0rpx auto 0rpx auto;
  }

  .qiyeInfo_fd1_6_c0_c1 {
    width: 46rpx;
    height: 46rpx;
  }

  .qiyeInfo_fd1_6_c1_c0_c1 {
    width: 24rpx;
    height: 24rpx;
    position: absolute;
    top: -6rpx;
    right: 0rpx;
  }

  .qiyeInfo_fd1_6_c1_c0 {
    background: rgba(240, 240, 240, 1);
    font-size: 28rpx;
    padding: 4rpx 6rpx 4rpx 6rpx;
    border-radius: 8rpx;
    background-size: 100% auto;
    margin: 16rpx 16rpx 0rpx 0rpx;
    position: relative;
    font-size: 28rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
    padding-bottom: 150rpx;
  }

  .personalData_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333;
    line-height: 88rpx;
  }

  .personalData_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .personalData_fd0_0_c0 {
    width: 120rpx;
  }

  .personalData_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .personalData_flex_1 {
    background: #fff;
    padding: 0rpx 32rpx 0 32rpx;
  }

  .personalData_fd1_11_c1_c0 {
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor0);
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .personalData_fd1_10_c1_c1 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .personalData_fd1_10_c1_c0 {
    border: 1px solid var(--benbenbdColor3);
    background: var(--benbenbgColor1);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor6);
    margin: 0rpx 16rpx 0rpx 0rpx;
    padding: 3rpx 6rpx 3rpx 6rpx;
  }

  .personalData_fd1_8_c1 {
    background: rgba(248, 248, 248, 1);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: rgba(170, 170, 170, 1);
    margin: 0rpx 60rpx 0rpx 0rpx;
  }

  .personalData_fd1_8_c0 {
    background: #5ECA71;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: var(--benbenFontColor3);
    margin: 0rpx 60rpx 0rpx 0rpx;
  }

  .personalData_fd1_8 {
    border-bottom: 1px solid #eee;
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .personalData_fd1_7 {
    height: 125rpx;
  }

  .personalData_fd1_6 {
    background: var(--benbenbgColor2);
    border-radius: 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    line-height: 88rpx;
    height: 88rpx;
    margin: 45rpx 0rpx 45rpx 0rpx;
    position: fixed;
    width: 686rpx;
    bottom: 0rpx;
    left: 32rpx;
  }

  .personalData_fd1_5 {
    background: #fff;
    background-size: 100% auto !important;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .personalData_fd1_4_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 40rpx;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .personalData_fd1_4_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .personalData_fd1_4 {
    border-bottom: 1px solid var(--benbenbdColor0);
    background: #fff;
    background-size: 100% auto !important;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .personalData_fd1_3_c1 {
    color: rgba(102, 102, 102, 1);
    font-size: 32rpx;
    font-weight: 400;
    line-height: 45rpx;
  }

  .personalData_fd1_2_c1_c0 {
    color: var(--benbenFontColor1);
    font-size: 32rpx;
    text-align: right;
  }

  .personalData_fd1_1_c1 {
    text-align: right;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .personalData_fd1_1 {
    border-bottom: 1px solid var(--benbenbdColor0);
    height: 125rpx;
  }

  .personalData_fd1_0_c2 {
    width: 22rpx;
    height: 32rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .personalData_fd1_0_c1_image {
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
  }

  .personalData_fd1_0_c1 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 16rpx;
    margin: 0rpx 0rpx 0rpx auto;
  }

  .personalData_fd1_0_c0 {
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 45rpx;
  }

  .personalData_fd1_0 {
    border-bottom: 1px solid var(--benbenbdColor0);
    height: 152rpx;
  }

  .personalData_fd2_0_c1_c1 {
    border: 1px solid var(--benbenbgColor2);
    background: var(--benbenbgColor2);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    width: 156rpx;
    height: 66rpx;
    margin: 24rpx 16rpx 0rpx 0rpx;
    color: var(--benbenFontColor3);
  }

  .personalData_fd2_0_c1_c0 {
    border: 1px solid #333333;
    background: #FFFFFF;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    width: 156rpx;
    height: 66rpx;
    margin: 24rpx 16rpx 0rpx 0rpx;
  }

  .personalData_fd2_0_c0_c2 {
    font-weight: 600;
  }

  .personalData_fd2_0_c0_c1 {
    font-size: 36rpx;
  }

  .personalData_fd2_0_c0 {
    border-bottom: 1px solid #eee;
    padding: 24rpx 0rpx 24rpx 0rpx;
    font-size: 32rpx;
  }

  .personalData_fd2_0 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    padding: 24rpx 24rpx 200rpx 24rpx;
    width: 100%;
  }

  .personalData_picker3_0_c2 {
    color: #333333;
    font-size: 28rpx;
  }

  .personalData_picker3_0_c1 {
    font-size: 32rpx;
    color: var(--benbenFontColor1);
  }

  .personalData_picker3_0_c0 {
    font-size: 28rpx;
    color: var(--benbenFontColor2);
  }

  .personalData_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_flex_4 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .personalData_fd4_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: rgba(94, 202, 113, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .personalData_fd4_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .personalData_fd4_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .personalData_fd4_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .personalData_fd4_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }

  .personalData_picker5_0_c2 {
    color: rgba(94, 202, 113, 1);
  }

  .personalData_picker5_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
